<html>

<head>
    <link rel="stylesheet" href="iconfont.css">
    <script src="vue.min.js"></script>
    <meta charset="utf-8">
    <link href="dark.css" rel="stylesheet" id="themeCss"/>
</head>

<body>    
    <div id="app" style="visibility:hidden;" @contextmenu="showAppMenu" @click="closePops">
        <validate-panel></validate-panel>
        <div class="gamePanel" :style="setting.gamePanelStyle">
            <div class="gamebtns" :style="setting.gameBtnStyle">
                <div class="gameBtnsLeft">
                    <button @click="refresh" :title="useChinese?'刷新游戏':'Refresh Game'">
                        <span class="iconfont icon-shuaxin"></span>
                    </button>
                </div>
                <div class="gameBtnsRight">
                    <button @click="playOrPause" :title="useChinese?'恢复/暂停游戏':'Play|Pause Game'">
                        <span :class="[pauseIcon]"></span>
                    </button>
                    <button @click="toggleFps" :title="useChinese?'显示隐藏FPS信息':'Show|Hide FPS'">
                        <span class="iconfont icon-zoushi"></span>
                    </button>
                    <button @click="toggleSnd" :title="useChinese?'静音/恢复':'Mute|Resume Sound'">
                        <span v-if="!setting.isMuted" class="iconfont icon-sound-"></span>
                        <span v-if="setting.isMuted" class="iconfont icon-sound-1"></span>
                    </button>
                    <button @click="toggleHover" :title="useChinese?'通过悬停方式定位节点':'find by Hover'" :style="hoverBtnStyle">
                        <span class="iconfont icon-aim1" ></span>
                    </button>
                    <button @click="toggleDesignMode" :style="designBtnStyle" :title="useChinese?'开关设计模式：可拖拽场景中的节点':'toggle design mode'">
                        <span class="iconfont icon-drag"></span>
                    </button>
                    <button @click.stop="showResolutionSelector=!showResolutionSelector" :title="useChinese?'调整分辨率':'Adjust Resolution'" :style="resolutionBtnStyle">
                        <span class="iconfont icon-xuanzhuan"></span>
                    </button>
                    <button v-if="!showDevToolInTab" @click="openWvDevTool" :title="useChinese?'打开开发者工具':'Open DevTool of Game Page'">
                        <span class="iconfont icon-tools-hardware"></span>
                    </button>
                </div>
            </div>
            <resolution-resizer></resolution-resizer>
            <resolution-selector v-if="showResolutionSelector"></resolution-selector>
            <hr>
            <!-- http://gameview.creator-star.cn/cocos/cake/index.html -->
            <!-- http://localhost:7456 -->
            <webview ref="wv" preload="./preload.js" :src="gameUrl"
                :style="setting.webviewStyle" :disablewebsecurity="disableWebSec" partition="persist:game" nodeintegrationinsubframes="true"
                webpreferences="contextIsolation=no"></webview>
            <hr>
            <div class="logs" ref="logs">
                <div class="logItem" v-for="l in smallLogs" :style="{color:logColor(l.t)}"><span class="logTime">{{l.time}}:</span>{{l.d}}</div>
            </div>
        </div>
        <div class="nodePanel" v-show="!setting.simpleMode">
            <div class="tab" :style="setting.tabStyle">
                <div class="tabs">
                    <div :class="{tabItem:true,selected:tab==0}" @click="tab=0" @contextmenu.stop="showMenu">
                        <span class="iconfont icon-shuxingjiegou"></span>{{sceneName}}
                        <a v-show="showRefreshTreeBtn" @click="forceUpdateTree" class="iconfont icon-shuaxin"></a>
                    </div>
                    <div :class="{tabItem:true,selected:tab==1}" @click="tab=1">
                        <span class="iconfont icon-terminal-box-line"></span>{{showDevToolInTab? (useChinese?"开发者工具":"DevTool"):"Console"}}
                    </div>
                    <div :class="{tabItem:true,selected:tab==2}" @click="tab=2">
                        <span class="iconfont icon-jiarehuoyan-xianxing"></span>{{useChinese?"Cocos信息":"Cocos"}}
                    </div>
                    <div :class="{tabItem:true,selected:tab==3}" @click="tab=3">
                        <span class="iconfont icon-jiedian"></span>{{useChinese?"扩展":"Extension"}}
                    </div>

                </div>

                <div>
                    <button @click.stop="showHelp" :title="useChinese?'帮助':'Help'">
                        <span class="iconfont icon-help"></span>
                    </button>
                    <!-- <button @click="location.reload()" title="Refresh Plugin">
                        <span class="iconfont icon-shuaxin"></span>
                    </button> -->
                    <button @click.stop="showSetting" :title="useChinese?'设置':'Setting'">
                        <span class="iconfont icon-shezhi" ></span>
                    </button>
                </div>
            </div>
            <!-- <hr> -->
            <!-- "n","deep","selected","close" -->
            <div style="display:flex;flex:1;position:relative;" v-show="tab==0">
                
                <div v-if="nodeTree" class="nodeTree">
                    <div style="min-width: max-content;">
                    <node-view v-for="sn in nodeTree.children" :n="sn" :deep="1" :selected="selectedNode==sn.id"
                        :key="sn.id"></node-view>
                    </div>
                </div>
                <div v-show="!nodeTree" style="font-size: 50px;text-align: center;margin: 100px auto auto;text-shadow: 3px 3px 4px #0000004a;">
                    <div style="color: rgb(0 0 0 / 0%);background: linear-gradient(60deg, #36d1ff, #fafdff, #23b2ff, #ffff72);background-clip: text;-webkit-background-clip: text;">COCOS</div> 
                    <div style="color: rgb(0 0 0 / 0%);background: linear-gradient(60deg, #b3b3b38c, #fafdff, #656565, #b7b7b0);background-clip: text;-webkit-background-clip: text;">INSPECTOR</div>
                    
                    <div style="font-size: 20px;margin-top: auto;color: rgb(31, 154, 255);">
                        {{useChinese?"加载中...":"loading ..."}}
                    </div>
                    <!-- <div style="font-size: 0.5em;">loading...</div> -->
                </div>
                
                <div class="inspectPanel" v-if="nodeDetail">
                    <node-detail-view :detail="nodeDetail"></node-detail-view>
                    <node-component v-for="com in nodeDetail.coms" :com="com" :key="com"></node-component>
                </div>
                <search-panel></search-panel>
            </div>
            <webview v-show="tab==1 && showDevToolInTab" ref="devtools" src="about:blank" webpreferences="contextIsolation=no"></webview>
            <console-panel v-if="!showDevToolInTab && tab==1"></console-panel>
            <cocos-panel v-if="tab==2"></cocos-panel>
            <extension-panel v-if="tab==3"></extension-panel>
        </div>
        <my-help ref="help"></my-help>
    </div>

    
    <div class="settingBox" id="setting">
        <transition name="slide-fade">
            <div class="setting" style="display: none;" v-show="show" @click.stop >

                <div class="settingHeader">
                    <span class="iconfont icon-shanchu" @click="close" style="font-size: 1.5em;"></span>
                    <div class="settingTitle"><img src="icon.png"/> {{useChinese ? "设置":"Setting"}} </div>

                </div>

                <!-- <hr> -->
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="useChinese" />
                    {{useChinese ? "使用中文":"Use Chinese"}}
                    <span class="settingDesc">
                        {{useChinese ? "右键菜单的语言更改将在重新打开插件窗口后生效":"language changes of context menu, will available after reopen cocos inspector window"}}
                    </span>
                </label>
                <label>
                    {{useChinese ? "主题：":"Theme:"}}
                    <select v-model="theme" @change="saveToStorage">
                        <option value="dark">Dark</option>
                        <option value="light">Light</option>
                    </select>
                </label>
                <label>
                    {{useChinese ? "游戏视图下方日志数量：":"Log Count Under GameView:"}}
                    <!-- {{logCount}} -->
                    <input type="number" @change="saveToStorage" v-model.number="logCount" step="1" min="0" max="100"  />
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="propertyAlignLeft" step="1" min="0" max="100"  />
                    {{useChinese ? "属性名左对齐":"Left Align Property Names"}}
                </label>
                
                <label>
                    {{useChinese ? "打开数组，当长度小于或等于：":"Open Array if length <=:"}}
                    <input type="number" @change="saveToStorage" v-model.number="openArrayLimit" step="1" min="0" max="100"  />
                </label>
                <label>
                    {{useChinese ? "Prefab节点的文字尺寸：":"Prefab Node Font Size: "}}
                    <br>
                    <div style="display: flex;">
                        <input @change="saveToStorage" min="1" max="1.5" step="0.01" type="range" v-model.number="prefabFontSize" />{{prefabFontSize}}
                    </div>
                </label>
                <hr>
                <br>
                <label>
                    {{useChinese ? "Url参数：":"Url Parameters:"}}
                    <!-- {{logCount}} -->
                    <br>
                    <textarea @contextmenu="showInputMenu()" placeholder="?xxx=y&abc=d" @change="saveToStorage" v-model="urlParams" ></textarea>
                </label>
                <label>
                    {{useChinese ? "自定义Url：":"Custom Url:"}}
                    <!-- {{logCount}} -->
                    <span class="settingDesc">{{useChinese ? "可通过菜单[open Custom Page]打开：":"can open by menu:[open Custom Page]"}}</span>
                    <br>
                    <textarea @contextmenu="showInputMenu()" placeholder="example:?http://xxx.com" @blur="saveToStorage"
                        v-model="customUrl"></textarea>
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="retinaEnable" />
                    {{useChinese ? "开启视网膜显示模式":"Retina Enable"}}
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="spaceToPause" />
                    {{useChinese ? "使用空格键暂停/恢复游戏":"Pause/Resume Game by [Space] Key"}}
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="autoUpdateTree" />
                    {{useChinese ? "自动刷新节点树":"Auto Update Node Tree"}}
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="syncNodeDetail" />
                    {{useChinese ? "自动同步选中节点属性的变化":"Sync Node Detail"}}
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="showZ" />
                    {{useChinese ? "显示节点的'z'相关属性":"Show Node Z Properties"}}
                </label>

                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="sliderWithInput" />
                    {{useChinese ? "滑块组件显示一个输入框":"Slider With Input"}}
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="openHttpProxy" />
                    {{useChinese ? "开启http代理":"Open Http Proxy"}}
                    
                </label>
                <hr>
                <label>
                    {{useChinese ? "代理服务器":"Http Proxy Server"}}<br>
                    <span class="settingDesc">{{useChinese ? "范例:":"example:"}}http=http://ip:port;https=https://ip:port</span>
                    <textarea @contextmenu="showInputMenu()" @blur="saveToStorage"
                        v-model="httpProxyServer" :disabled="!openHttpProxy" ></textarea>
                </label>
                <label>
                    {{useChinese ? "排除规则":"Bypass Rules"}}<br>
                    <span class="settingDesc">{{useChinese ? "范例:":"example:"}}foobar.com,*foobar.com,*.foobar.com,*foobar.com:99,https://x.\*.y.com:99</span>
                    <textarea @contextmenu="showInputMenu()" @blur="saveToStorage"
                        v-model="proxyBypassRules" :disabled="!openHttpProxy"></textarea>
                </label>
                
                <hr>
                <br>
                <b>{{useChinese ? "以下设置改变后需要重启插件或CocosCreator" : "Need Restart Inspector/CocosCreator After Change"}}</b>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="disableWebSec" />
                    {{useChinese ? "禁用web安全":"Disable Web Security"}}
                    <span class="settingDesc">{{useChinese ? "禁用后，游戏页面可跨域":"if disable, the page can cross domain"}}</span>
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="showDevToolInTab" />
                    {{useChinese ? "在标签栏中显示开发者工具":"Show DevTool In Tab"}}
                    <span class="settingDesc">{{useChinese ? "此特性已经在大于或等于ccc v2.2.2的版本中测试过":"tested >= ccc v2.2.2"}}</span>
                </label>
                <!-- <label>
                    <input type="checkbox" @change="saveToStorage" v-model="glass" />
                    Glass Effect
                    <span class="settingDesc">only support macOS</span>
                </label> -->
                <hr>
                <br>
                <b>{{useChinese ? "FGUI设置":"FGUI Setting"}}</b>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="displayAsFairyTree" />
                    {{useChinese ? "以FariyGUI的设计图纸模式显示节点树":"Display As Fairy Tree"}}
                </label>
                <label>
                    <input type="checkbox" :disabled="!displayAsFairyTree" @change="saveToStorage" v-model="hideFairyComContainer" />
                    {{useChinese ? "隐藏Fgui组件的Container节点层级": "Hide Fairy Component Container"}}
                </label>

                <hr>
                <br>
                <div >{{useChinese ? "反馈建议：": "Feedback: "}}<a href="https://forum.cocos.org/t/topic/115516">https://forum.cocos.org/t/topic/115516</a></div>
                <br>
                <div >{{useChinese ? "查看新版本：": "Check New Version: "}}<a href="https://store.cocos.com/app/detail/2940">https://store.cocos.com/app/detail/2940</a></div>
                <hr>
                
                <br>
                <!-- <br> -->
                <!-- <br> -->
                <div class="about" >
                    <div class="settingHeader">                    
                        <div class="settingTitle">{{useChinese ? "关于": "About"}}  </div>
                    </div>
                    <!-- <hr> -->
                    <div>
                        <span class="nodePropertyTitle">{{useChinese ? "作者：": "Author:"}} </span>
                        chuan.z
                    </div>
                    <div>
                        <span class="nodePropertyTitle">{{useChinese ? "联系方式：": "Contact:" }}</span>
                        <a @click="remote.shell.openExternal('mailto:bytetalking@qq.com')">bytetalking@qq.com</a>
                    </div>
                    <div>                    
                        <span class="nodePropertyTitle">{{useChinese ? "网站：": "WebSite:"}} </span>
                        <a @click="remote.shell.openExternal('https://bytetalking.com')" >https://bytetalking.com</a>
                    </div>
                    <hr>
                    <div>
                        <span class="nodePropertyTitle">{{useChinese ? "订阅号：": "WeChat Offical Account: "}}</span>
                        ByteTalking
                    </div>
                    <div>
                        <span class="nodePropertyTitle">{{useChinese ? "二维码：": "QRCode: "}}</span>                        
                        <img src="wechatOC.jpeg" style="max-width: 150px;max-height: 150px;">
                    </div>
                </div>
            </div>
        </transition>
    </div>


    <script src="./app.js">

    </script>
</body>

</html>